<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>{{ obj.name }}--{{ obj.age }}--{{ obj.sex }}</p>
    <button @click="obj.age++">累加</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "AboutView",
});
</script>

<script lang="ts" setup>
/* reactive方法用来创建一个响应式数据 */
import { reactive, ref } from "vue";

//对reactive的数据进行类型限制
interface ObjType {
  name: string;
  age: number;
  sex: string;
}

const obj = reactive<ObjType>({ name: "laowang", age: 18, sex: "nan" });
console.log(obj);
console.log(obj.age);

let a = ref<number>(0);
console.log(a);
</script>
